<template>
  <view class="game-lobby">
    <!-- 用户信息栏 -->
    <view class="user-info-bar">
      <view class="user-avatar">
        <image 
          :src="userInfo.avatar || '/static/logo.png'" 
          class="avatar" 
          @error="handleAvatarError"
        />
      </view>
      <view class="user-details">
        <text class="user-name">{{ userInfo.name || '玩家名称' }}</text>
        <text class="user-gold">💰 {{ userGold }} 金币</text>
        <text class="user-points">💎 {{ userInfo.points || 0 }} 积分</text>
      </view>
      <view class="user-actions">
        <view class="action-btn" @click="showShop">
          <text class="action-icon">🛒</text>
          <text class="action-text">兑换</text>
        </view>
        <view class="action-btn" @click="showSettings">
          <text class="action-icon">⚙️</text>
          <text class="action-text">设置</text>
        </view>
      </view>
    </view>

    <!-- 游戏标题 -->
    <view class="lobby-header">
      <text class="lobby-title">🎮 信任博弈游戏大厅</text>
      <text class="lobby-subtitle">选择游戏模式开始冒险</text>
    </view>

    <!-- 开始游戏按钮 -->
    <view class="start-game-section">
      <button 
        class="start-game-btn" 
        @click="toggleGameModes"
        :class="{ 'expanded': gameModesExpanded }"
      >
        <text class="start-game-icon">🎮</text>
        <text class="start-game-text">{{ gameModesExpanded ? '收起选项' : '开始游戏' }}</text>
      </button>
    </view>

    <!-- 遮罩层 -->
    <view 
      class="game-modes-overlay" 
      v-if="gameModesExpanded"
      @click="closeGameModes"
    >
      <!-- 游戏模式选择 - 悬浮在遮罩上 -->
      <view class="game-modes-floating" @click="closeGameModes">
        <view 
          class="mode-card" 
          @click="selectGameMode('single')"
          :class="{ 'fan-out': gameModesExpanded, 'delay-1': gameModesExpanded }"
        >
          <view class="mode-icon">👤</view>
          <view class="mode-content">
            <text class="mode-title">单人游戏</text>
            <text class="mode-desc">与AI对手进行博弈</text>
          </view>
          <view class="mode-arrow">→</view>
        </view>

        <view 
          class="mode-card" 
          @click="selectGameMode('multiplayer')"
          :class="{ 'fan-out': gameModesExpanded, 'delay-2': gameModesExpanded }"
        >
          <view class="mode-icon">👥</view>
          <view class="mode-content">
            <text class="mode-title">多人对战</text>
            <text class="mode-desc">与真实玩家对决</text>
          </view>
          <view class="mode-arrow">→</view>
        </view>

        <view 
          class="mode-card" 
          @click="selectGameMode('friend')"
          :class="{ 'fan-out': gameModesExpanded, 'delay-3': gameModesExpanded }"
        >
          <view class="mode-icon">🤝</view>
          <view class="mode-content">
            <text class="mode-title">好友对战</text>
            <text class="mode-desc">邀请好友一起玩</text>
          </view>
          <view class="mode-arrow">→</view>
        </view>
      </view>
    </view>

    <!-- 房间展示区域 -->
    <view class="rooms-section">
      <view class="section-header">
        <text class="section-title">🏠 公共房间</text>
        <text class="section-action" @click="refreshRooms">刷新</text>
      </view>
      
      <view class="rooms-list">
        <view class="room-card" v-for="room in publicRooms" :key="room.id" @click="joinRoom(room)">
          <view class="room-info">
            <text class="room-name">{{ room.name }}</text>
            <text class="room-players">👥 {{ room.players }}/{{ room.maxPlayers }}</text>
          </view>
          <view class="room-status">
            <text class="room-bet">💰 {{ room.bet }}金币</text>
            <text class="room-state" :class="{ 'waiting': room.state === 'waiting', 'playing': room.state === 'playing' }">
              {{ room.state === 'waiting' ? '等待中' : '游戏中' }}
            </text>
          </view>
        </view>
        
        <view class="no-rooms" v-if="publicRooms.length === 0">
          <text class="no-rooms-text">暂无公共房间</text>
        </view>
      </view>
    </view>

    <!-- 快速操作区域 -->
    <view class="quick-actions">
      <view class="action-card" @click="createRoom">
        <view class="action-icon">➕</view>
        <text class="action-label">创建房间</text>
      </view>
      
      <view class="action-card" @click="inviteFriends">
        <view class="action-icon">📨</view>
        <text class="action-label">邀请好友</text>
      </view>
      
      <view class="action-card" @click="showRanking">
        <view class="action-icon">🏆</view>
        <text class="action-label">排行榜</text>
      </view>
    </view>

    <!-- 游戏模式选择弹窗 -->
    <view class="game-mode-modal" v-if="showModeModal">
      <view class="modal-overlay" @click="hideModeModal"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">选择游戏类型</text>
          <view class="modal-close" @click="hideModeModal">×</view>
        </view>
        
        <view class="modal-body">
          <view class="game-type-option" @click="selectGameType('classic')">
            <view class="option-icon">🎭</view>
            <view class="option-content">
              <text class="option-title">黑白卡牌心理博弈</text>
              <text class="option-desc">信任与欺骗的终极对决</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 兑换弹窗 -->
    <view class="exchange-modal" v-if="showExchangeModal">
      <view class="modal-overlay" @click="closeExchangeModal"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">💎 兑换中心</text>
          <view class="modal-close" @click="closeExchangeModal">×</view>
        </view>
        
        <view class="modal-body">
          <!-- 兑换模式选择 -->
          <view class="exchange-mode-selector">
            <button 
              class="mode-btn"
              :class="{ 'active': exchangeMode === 'pointsToGold' }"
              @click="setExchangeMode('pointsToGold')"
            >
              积分→金币
            </button>
            <button 
              class="mode-btn"
              :class="{ 'active': exchangeMode === 'goldToPoints' }"
              @click="setExchangeMode('goldToPoints')"
            >
              金币→积分
            </button>
          </view>
          
          <!-- 当前资源显示 -->
          <view class="current-resources">
            <view class="resource-item">
              <text class="resource-icon">💰</text>
              <text class="resource-label">金币:</text>
              <text class="resource-value">{{ userGold }}</text>
            </view>
            <view class="resource-item">
              <text class="resource-icon">💎</text>
              <text class="resource-label">积分:</text>
              <text class="resource-value">{{ userInfo.points || 0 }}</text>
            </view>
          </view>
          
          <!-- 兑换比例显示 -->
          <view class="exchange-rate">
            <text class="rate-text">
              {{ exchangeMode === 'pointsToGold' ? '1积分 = 10金币' : '10金币 = 1积分' }}
            </text>
          </view>
          
          <!-- 兑换数量输入 -->
          <view class="exchange-input-section">
            <text class="input-label">
              {{ exchangeMode === 'pointsToGold' ? '输入要兑换的金币数量' : '输入要兑换的积分数量' }}
            </text>
            <input 
              type="number"
              v-model="exchangeAmount"
              :placeholder="exchangeMode === 'pointsToGold' ? '请输入金币' : '请输入积分'"
              class="exchange-input"
              @input="validateExchangeAmount"
            />
            
            <!-- 快捷选择按钮 -->
            <view class="quick-amounts">
              <text class="quick-label">快捷选择:</text>
              <view class="quick-buttons">
                <button 
                  v-for="amount in getQuickAmounts()" 
                  :key="amount"
                  class="quick-btn"
                  @click="setExchangeAmount(amount)"
                >
                  {{ amount }}
                </button>
              </view>
            </view>
          </view>
          
          <!-- 兑换预览 -->
          <view class="exchange-preview" v-if="exchangeAmount > 0">
            <text class="preview-title">兑换预览:</text>
            <text class="preview-text">
              {{ exchangeMode === 'pointsToGold' 
                ? `消耗 ${Math.ceil(exchangeAmount / 10)} 积分，获得 ${exchangeAmount} 金币`
                : `消耗 ${exchangeAmount * 10} 金币，获得 ${exchangeAmount} 积分`
              }}
            </text>
          </view>
          
          <!-- 兑换按钮 -->
          <view class="exchange-actions">
            <button 
              class="exchange-btn"
              :class="{ 'disabled': !canExchange }"
              :disabled="!canExchange"
              @click="performExchange"
            >
              确认兑换
            </button>
            <button class="cancel-btn" @click="closeExchangeModal">
              取消
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import pointsManager from '@/utils/points-manager.js'
import goldManager from '@/utils/gold-manager.js'

export default {
  name: 'GameIndex',
  data() {
    return {
      showModeModal: false,
      selectedGameType: null,
      showExchangeModal: false,
      gameModesExpanded: false,
      exchangeMode: 'pointsToGold', // 'pointsToGold' 或 'goldToPoints'
      exchangeAmount: 0,
      userGold: 1000, // 用户金币数量
      userInfo: {
        name: '',
        avatar: '',
        points: 0
      },
      publicRooms: [
        { id: 1, name: '新手房间', players: 2, maxPlayers: 4, bet: 100, state: 'waiting' },
        { id: 2, name: '高手对战', players: 1, maxPlayers: 2, bet: 500, state: 'playing' },
        { id: 3, name: '友谊赛', players: 0, maxPlayers: 3, bet: 50, state: 'waiting' },
      ]
    }
  },
  computed: {
    // 兑换验证
    canExchange() {
      if (!this.exchangeAmount || this.exchangeAmount <= 0) return false
      
      if (this.exchangeMode === 'pointsToGold') {
        // 积分兑换金币：输入的是目标金币数量，检查积分是否足够
        const neededPoints = Math.ceil(this.exchangeAmount / 10)
        return neededPoints <= (this.userInfo.points || 0)
      } else {
        // 金币兑换积分：输入的是目标积分数量，检查金币是否足够
        const neededGold = this.exchangeAmount * 10
        return neededGold <= this.userGold
      }
    }
  },
  mounted() {
    this.loadUserResources()
  },
  onShow() {
    this.loadUserResources()
  },
  methods: {
    // 加载用户资源数据
    loadUserResources() {
      // 加载用户信息（头像、名称等）
      this.loadUserInfo()
      
      // 加载积分数据
      this.loadPointsData()
      
      // 加载金币数据
      const goldData = goldManager.getGoldData()
      if (goldData) {
        this.userGold = goldData.gold || 0
      }
    },

    // 加载用户信息
    loadUserInfo() {
      try {
        const currentUser = uni.getStorageSync('currentUser')
        if (currentUser) {
          const userData = JSON.parse(currentUser)
          this.userInfo = {
            name: userData.name || userData.username || '玩家',
            avatar: userData.avatar || ''
          }
        }
      } catch (error) {
        console.error('加载用户信息失败:', error)
      }
    },

    // 加载积分数据
    loadPointsData() {
      try {
        const pointsData = pointsManager.getPointsData()
        if (pointsData) {
          this.userInfo.points = pointsData.points || 0
        } else {
          this.userInfo.points = 0
        }
      } catch (error) {
        console.error('加载积分数据失败:', error)
        this.userInfo.points = 0
      }
    },

    // 处理头像错误
    handleAvatarError() {
      console.log('头像加载失败，使用默认头像')
    },
    // 显示积分商城
    showShop() {
      // 显示兑换弹窗而不是跳转到商城
      this.showExchangeModal = true
    },
    showSettings() {
      uni.navigateTo({
        url: '/pages/settings/index'
      })
    },
    // 切换游戏模式展开/收起
    toggleGameModes() {
      if (!this.gameModesExpanded) {
        this.gameModesExpanded = true
        // 确保动画能正确触发
        this.$nextTick(() => {
          // 先重置所有卡片的动画状态
          const cards = this.$el.querySelectorAll('.mode-card')
          cards.forEach(card => {
            card.classList.remove('fan-out')
          })
          
          // 然后依次添加动画类
          setTimeout(() => {
            cards.forEach((card, index) => {
              setTimeout(() => {
                card.classList.add('fan-out')
              }, index * 150)
            })
          }, 50)
        })
      } else {
        this.gameModesExpanded = false
      }
    },

    // 关闭游戏模式选择
    closeGameModes() {
      // 先移除动画类
      this.$nextTick(() => {
        const cards = this.$el.querySelectorAll('.mode-card')
        cards.forEach(card => {
          card.classList.remove('fan-out')
        })
      })
      
      // 延迟关闭，让动画先完成
      setTimeout(() => {
        this.gameModesExpanded = false
      }, 100)
    },

    // 选择游戏模式
    selectGameMode(type) {
      // 先移除动画类
      this.$nextTick(() => {
        const cards = this.$el.querySelectorAll('.mode-card')
        cards.forEach(card => {
          card.classList.remove('fan-out')
        })
      })
      
      // 延迟关闭，让动画先完成
      setTimeout(() => {
        this.gameModesExpanded = false
        this.showGameModeModal(type)
      }, 100)
    },

    showGameModeModal(type) {
      this.selectedGameType = type;
      this.showModeModal = true;
    },
    hideModeModal() {
      this.showModeModal = false;
    },
    selectGameType(type) {
      this.hideModeModal();
      // 现在只有一种游戏类型：黑白卡牌心理博弈
      uni.navigateTo({
        url: '/pages/game/trust-fall/trust-fall'
      })
    },
    refreshRooms() {
      console.log('Refreshing rooms...');
      // In a real app, you would fetch new room data from an API
      // For now, we'll just re-render the current list
    },
    createRoom() {
      console.log('Creating new room...');
      // In a real app, you would navigate to a room creation page
    },
    inviteFriends() {
      console.log('Inviting friends...');
      // In a real app, you would implement friend invitation logic
    },
    showRanking() {
      console.log('Showing ranking...');
      // In a real app, you would navigate to a ranking page
    },
    joinRoom(room) {
      console.log('Joining room:', room);
      // In a real app, you would navigate to the game page with room details
    },
    // 关闭兑换弹窗
    closeExchangeModal() {
      this.showExchangeModal = false
      this.exchangeAmount = 0
    },

    // 设置兑换模式
    setExchangeMode(mode) {
      this.exchangeMode = mode
      this.exchangeAmount = 0
    },

    // 设置兑换数量
    setExchangeAmount(amount) {
      this.exchangeAmount = amount
    },

    // 获取快捷选择数量
    getQuickAmounts() {
      if (this.exchangeMode === 'pointsToGold') {
        // 积分兑换金币：快捷选择金币数量
        const maxGold = Math.floor((this.userInfo.points || 0) * 10)
        return [10, 20, 50, Math.min(maxGold, 100)]
      } else {
        // 金币兑换积分：快捷选择积分数量
        const maxPoints = Math.floor(this.userGold / 10)
        return [1, 5, 10, Math.min(maxPoints, 50)]
      }
    },

    // 验证兑换数量
    validateExchangeAmount() {
      const amount = parseInt(this.exchangeAmount)
      if (isNaN(amount) || amount < 0) {
        this.exchangeAmount = 0
        return
      }

      if (this.exchangeMode === 'pointsToGold') {
        // 积分兑换金币：检查金币数量不能超过可兑换的最大值
        const maxGold = Math.floor((this.userInfo.points || 0) * 10)
        if (amount > maxGold) {
          this.exchangeAmount = maxGold
        }
      } else {
        // 金币兑换积分：检查积分数量不能超过可兑换的最大值
        const maxPoints = Math.floor(this.userGold / 10)
        if (amount > maxPoints) {
          this.exchangeAmount = maxPoints
        }
      }
    },

    // 执行兑换
    performExchange() {
      if (!this.canExchange) {
        uni.showToast({
          title: '兑换数量无效',
          icon: 'none'
        })
        return
      }

      const amount = parseInt(this.exchangeAmount)
      if (this.exchangeMode === 'pointsToGold') {
        // 积分兑换金币：输入的是目标金币数量
        const neededPoints = Math.ceil(amount / 10)
        
        if (neededPoints > (this.userInfo.points || 0)) {
          uni.showToast({
            title: '积分不足',
            icon: 'none'
          })
          return
        }

        // 使用积分管理器消费积分
        const spendSuccess = pointsManager.spendPoints(neededPoints, '积分兑换金币')
        if (!spendSuccess) {
          uni.showToast({
            title: '兑换失败',
            icon: 'none'
          })
          return
        }

        // 使用金币管理器增加金币
        const addSuccess = goldManager.addGold(amount, '积分兑换获得')
        if (!addSuccess) {
          // 如果金币增加失败，恢复积分
          pointsManager.addPoints(neededPoints, '兑换失败，积分恢复')
          uni.showToast({
            title: '兑换失败',
            icon: 'none'
          })
          return
        }

        // 更新本地显示
        this.loadPointsData()

        uni.showToast({
          title: `成功兑换 ${amount} 金币`,
          icon: 'success'
        })
      } else {
        // 金币兑换积分：输入的是目标积分数量
        const neededGold = amount * 10
        
        if (neededGold > this.userGold) {
          uni.showToast({
            title: '金币不足',
            icon: 'none'
          })
          return
        }

        // 使用金币管理器消费金币
        const spendSuccess = goldManager.spendGold(neededGold, '金币兑换积分')
        if (!spendSuccess) {
          uni.showToast({
            title: '兑换失败',
            icon: 'none'
          })
          return
        }

        // 使用积分管理器增加积分
        const addSuccess = pointsManager.addPoints(amount, '金币兑换获得')
        if (!addSuccess) {
          // 如果积分增加失败，恢复金币
          goldManager.addGold(neededGold, '兑换失败，金币恢复')
          uni.showToast({
            title: '兑换失败',
            icon: 'none'
          })
          return
        }

        // 更新本地显示
        this.loadPointsData()

        uni.showToast({
          title: `成功兑换 ${amount} 积分`,
          icon: 'success'
        })
      }

      this.closeExchangeModal()
    },
  }
}
</script>

<style scoped>
.game-lobby {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx 30rpx;
}

.user-info-bar {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  overflow: hidden;
  margin-right: 20rpx;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-details {
  flex: 1;
  margin-right: 20rpx;
}

.user-name {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.user-gold {
  display: block;
  font-size: 28rpx;
  color: #ff6b6b;
  margin-bottom: 5rpx;
}

.user-points {
  display: block;
  font-size: 24rpx;
  color: #4cd964;
}

.user-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #4cd964;
  color: white;
  border-radius: 20rpx;
  padding: 10rpx 20rpx;
  transition: background 0.3s ease;
}

.action-btn:active {
  background: #38c152;
}

.action-icon {
  font-size: 40rpx;
  margin-bottom: 5rpx;
}

.action-text {
  font-size: 24rpx;
  font-weight: bold;
}

.lobby-header {
  text-align: center;
  margin-bottom: 60rpx;
}

.lobby-title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 20rpx;
}

.lobby-subtitle {
  display: block;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

/* 开始游戏按钮样式 */
.start-game-section {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
}

.start-game-btn {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #4cd964 0%, #5de675 100%);
  color: white;
  border: none;
  border-radius: 50rpx;
  padding: 24rpx 48rpx;
  font-size: 28rpx;
  font-weight: bold;
  box-shadow: 0 8rpx 24rpx rgba(76, 217, 100, 0.3);
  transition: all 0.3s ease;
  transform-origin: center;
  width: auto;
  min-width: 200rpx;
  height: auto;
  line-height: 1;
}

.start-game-btn:active {
  transform: scale(0.95);
}

.start-game-btn.expanded {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  box-shadow: 0 10rpx 30rpx rgba(255, 107, 107, 0.3);
}

.start-game-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.start-game-text {
  font-size: 28rpx;
  font-weight: bold;
}

/* 遮罩层样式 */
.game-modes-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

/* 悬浮游戏模式容器 */
.game-modes-floating {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  padding: 60rpx 40rpx;
  width: 90%;
  max-width: 600rpx;
  margin: 0 auto;
}

.mode-card {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 30rpx;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  opacity: 0;
  transform: translateY(60rpx) translateX(-150rpx) rotate(-20deg) scale(0.7);
  transform-origin: center center;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 550rpx;
}

/* 扇子展开动画 */
.mode-card.fan-out {
  opacity: 1;
  transform: translateY(0) translateX(0) rotate(0deg) scale(1);
}

.mode-card.delay-1 {
  transition-delay: 0.1s;
  transform: translateY(45rpx) translateX(-120rpx) rotate(-15deg) scale(0.75);
}

.mode-card.delay-2 {
  transition-delay: 0.2s;
  transform: translateY(35rpx) translateX(-100rpx) rotate(-12deg) scale(0.75);
}

.mode-card.delay-3 {
  transition-delay: 0.3s;
  transform: translateY(25rpx) translateX(-80rpx) rotate(-8deg) scale(0.75);
}

/* 遮罩淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.mode-card:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.8);
}

.mode-card.new-game {
  border: 2rpx solid #4cd964;
  box-shadow: 0 0 20rpx rgba(76, 217, 100, 0.3);
}

.mode-icon {
  font-size: 60rpx;
  margin-right: 30rpx;
}

.mode-content {
  flex: 1;
}

.mode-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.mode-desc {
  display: block;
  font-size: 24rpx;
  color: #666;
}

.mode-arrow {
  font-size: 32rpx;
  color: #4cd964;
  font-weight: bold;
}

.new-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background: #ff3b30;
  color: white;
  font-size: 20rpx;
  font-weight: bold;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  transform: rotate(15deg);
}

.rooms-section {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 60rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.section-action {
  font-size: 28rpx;
  color: #4cd964;
  font-weight: bold;
}

.rooms-list {
  display: flex;
  flex-direction: column;
}

.room-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f5f5;
  border-radius: 15rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 15rpx;
  transition: background 0.3s ease;
}

.room-card:active {
  background: #e0e0e0;
}

.room-info {
  flex: 1;
}

.room-name {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.room-players {
  display: block;
  font-size: 24rpx;
  color: #666;
}

.room-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.room-bet {
  display: block;
  font-size: 24rpx;
  font-weight: bold;
  color: #ff6b6b;
  margin-bottom: 5rpx;
}

.room-state {
  display: block;
  font-size: 24rpx;
  font-weight: bold;
  padding: 5rpx 15rpx;
  border-radius: 10rpx;
}

.room-state.waiting {
  background-color: #e0f2f7;
  color: #2196f3;
}

.room-state.playing {
  background-color: #f0f9eb;
  color: #67c23a;
}

.no-rooms {
  text-align: center;
  padding: 40rpx 0;
  color: rgba(255, 255, 255, 0.8);
}

.no-rooms-text {
  font-size: 28rpx;
}

.quick-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 60rpx;
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  padding: 20rpx 30rpx;
  transition: all 0.3s ease;
}

.action-card:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.8);
}

.action-icon {
  font-size: 60rpx;
  margin-bottom: 10rpx;
}

.action-label {
  display: block;
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
}

.game-mode-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20rpx;
}

.modal-content {
  position: relative;
  background: white;
  border-radius: 20rpx;
  width: 90%;
  max-width: 600rpx;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
  font-weight: bold;
}

.modal-body {
  padding: 30rpx;
  overflow-y: auto;
  flex: 1;
}

.game-type-option {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 15rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 15rpx;
  transition: background 0.3s ease;
}

.game-type-option:active {
  background: #e0e0e0;
}

.option-icon {
  font-size: 50rpx;
  margin-right: 20rpx;
}

.option-content {
  flex: 1;
}

.option-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.option-desc {
  display: block;
  font-size: 22rpx;
  color: #666;
}

/* 新增兑换弹窗样式 */
.exchange-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.exchange-modal .modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.exchange-modal .modal-content {
  background: #fff;
  border-radius: 20rpx;
  width: 90%;
  max-width: 500rpx;
  max-height: 70%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
}

.exchange-modal .modal-header {
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exchange-modal .modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.exchange-modal .modal-close {
  font-size: 40rpx;
  color: #999;
  font-weight: bold;
}

.exchange-modal .modal-body {
  padding: 30rpx;
  overflow-y: auto;
  flex: 1;
}

.exchange-option {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 15rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 15rpx;
  transition: background 0.3s ease;
}

.exchange-option:active {
  background: #e0e0e0;
}

.exchange-option .option-icon {
  font-size: 50rpx;
  margin-right: 20rpx;
}

.exchange-option .option-content {
  flex: 1;
}

.exchange-option .option-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.exchange-option .option-desc {
  display: block;
  font-size: 22rpx;
  color: #666;
}

/* 兑换模式选择器 */
.exchange-mode-selector {
  display: flex;
  margin-bottom: 30rpx;
  background: #f5f5f5;
  border-radius: 15rpx;
  padding: 5rpx;
}

.mode-btn {
  flex: 1;
  padding: 20rpx;
  border: none;
  background: transparent;
  border-radius: 10rpx;
  font-size: 26rpx;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mode-btn.active {
  background: white;
  color: #4cd964;
  box-shadow: 0 2rpx 10rpx rgba(76, 217, 100, 0.2);
}

/* 当前资源显示 */
.current-resources {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 15rpx;
}

.resource-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.resource-icon {
  font-size: 28rpx;
}

.resource-label {
  font-size: 24rpx;
  color: #666;
}

.resource-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

/* 兑换比例 */
.exchange-rate {
  text-align: center;
  margin-bottom: 30rpx;
  padding: 15rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15rpx;
}

.rate-text {
  font-size: 26rpx;
  color: white;
  font-weight: bold;
}

/* 兑换输入区域 */
.exchange-input-section {
  margin-bottom: 30rpx;
}

.input-label {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 15rpx;
  font-weight: bold;
}

.exchange-input {
  width: 100%;
  padding: 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  box-sizing: border-box;
}

.exchange-input:focus {
  border-color: #4cd964;
  outline: none;
}

/* 快捷选择 */
.quick-amounts {
  margin-bottom: 20rpx;
}

.quick-label {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.quick-buttons {
  display: flex;
  gap: 10rpx;
  flex-wrap: wrap;
}

.quick-btn {
  padding: 15rpx 25rpx;
  border: 2rpx solid #ddd;
  background: white;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quick-btn:active {
  background: #4cd964;
  color: white;
  border-color: #4cd964;
}

/* 兑换预览 */
.exchange-preview {
  margin-bottom: 30rpx;
  padding: 20rpx;
  background: #e8f5e8;
  border-radius: 15rpx;
  border-left: 6rpx solid #4cd964;
}

.preview-title {
  display: block;
  font-size: 24rpx;
  color: #4cd964;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.preview-text {
  font-size: 26rpx;
  color: #333;
}

/* 兑换操作按钮 */
.exchange-actions {
  display: flex;
  gap: 20rpx;
}

.exchange-btn {
  flex: 1;
  padding: 25rpx;
  background: linear-gradient(135deg, #4cd964 0%, #5de675 100%);
  color: white;
  border: none;
  border-radius: 15rpx;
  font-size: 28rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.exchange-btn:active {
  transform: translateY(2rpx);
}

.exchange-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.cancel-btn {
  flex: 1;
  padding: 25rpx;
  background: #f5f5f5;
  color: #666;
  border: none;
  border-radius: 15rpx;
  font-size: 28rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn:active {
  background: #e0e0e0;
}
</style>

